<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/common.css" rel="stylesheet" type="text/css" />
<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.1.8.2.js" type="text/javascript"></script>
<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
<script type="text/javascript" src="js/slide.js"></script>
<script src="js/common_js.js" type="text/javascript"></script>
<script src="js/jquery.foucs.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-3.6.0.min.js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<title>用户中心</title>
</head>

<body>
<!--顶部样式-->
<div class="top_header">
<em class="left_img"></em>
<div class="header clearfix" id="header">
<div class="header_Section">
 <div class="shortcut">
  <ul>
   <li  class="hd_menu_tit"><a href="user_info.html" id="login_info"></a></li>
   <li  class="hd_menu_tit"><em class="Collect_img"></em><a href="#">收藏夹</a></li>
   <li  class="hd_menu_tit"><em class="cart_img"></em><a href="shopping_cart.html">购物车</a></li>
   <li  class="hd_menu_tit list_name" data-addclass="hd_menu_hover"><a href="#">网站导航</a><em class="navigation_img"></em>
     
    <div class="hd_menu_list">
     <span class="wire"></span>
		   <ul>
		    <li><a href="#">常见问题</a></li>
			<li><a href="#">在线退换货</a></li>
		    <li><a href="#">在线投诉</a></li>
			<li><a href="#">配送范围</a></li>
		   </ul>
		</div>	
   </li>
  </ul>
 </div>
 <div class="nav" id="Navigation">
<ul class="Navigation_name"> 
   <li class=""><a href="index.html">首页</a></li>
   <li class=""><a herf="#">浆果类专区</a></li>
   <li class=""><a herf="#">核果类专区</a></li>
   <li class=""><a herf="#">温性水果专区</a></li>
   <li class=""><a herf="#">仁果专区</a></li>
   <li class=""><a herf="#">联系我们</a></li>
  </ul>
 </div>
</div>
</div>
<em class="right_img"></em>
</div>
<!---->
<div><a href="#"><img src="images/AD_page_img_02.png" width="100%"/></a></div>
<!--位置-->
<div class="Bread_crumbs">
 <div class="Inside_pages clearfix">
   <div class="right Search">
   <form>
    <input name="" type="text"  class="Search_Box"/>
    <input name="" type="button"  name="" class="Search_btn"/>
    </form>
   </div>
 </div>
</div>
<!--用户中心-->
<div class="Inside_pages clearfix">
  <div class="clearfix user" >
    <div class="user_left">
      <div class="user_info">
       <div class="Head_portrait"><img src="images/product_img_17.png"  width="80px" height="80px"/><!--头像区域--></div>
       <div class="user_name">用户蜜甘草</div>
      </div>
      <ul class="Section">
    
       <li><a href="#"><em></em><span>个人信息</span></a></li>
       <li><a href="#"><em></em><span>修改密码</span></a></li>
       <li><a href="#"><em></em><span>我的订单</span></a></li>
       <li><a href="#"><em></em><span>我的评论</span></a></li>

       <li><a href="#"><em></em><span>我的收藏</span></a></li>
       <li><a href="user_address.html"><em></em><span>收货地址管理</span></a></li>
      </ul>
    </div>
    <div class="user_right">
      <div class="user_Borders">
       <div class="title_name">
        <span class="name">个人信息设置</span>
       </div>
       <div class="about_user_info">
       <div class="user_layout" id="userInfoList">
         <ul >
          <li><label class="user_title_name">用户头像：</label></li>
          <li><label class="user_title_name">用户昵称：</label><input name="consumerName" type="text" value="11" class="add_text"/><em>*</em></li>
          <li><label class="user_title_name">用户性别：</label>               
            <label class="sex"> <input type="radio" name="RadioGroup1" value="1" id="RadioGroup1_0" /><span>男</span></label>
            <label class="sex"><input type="radio" name="RadioGroup1" value="2" id="RadioGroup1_1" /><span>女</span></label> 
            <em>*</em>         
          </li>
          <li><label class="user_title_name">手&nbsp;机&nbsp;号：</label><input name="" type="text"  class="add_text"/><em>*</em></li>
          <li><label class="user_title_name">邮箱地址：</label><input name="" type="text"  class="add_text"/><em>*</em></li>         
         </ul>
         <div class="operating_btn"><input name="name" type="submit" value="提交"  onclick="update()" class="submit—btn"/></div>
         </div>
       </div>
      </div>
    </div>
  </div>
</div>
<script>
	$(document).ready(function() {
	    // 页面加载时检查sessionStorage是否有phone值
	    var storedPhone = sessionStorage.getItem('phone');
	    if (storedPhone) {
	        // 如果有，将其插入到id为"login_info"的元素中
	        $('#login_info').text(storedPhone);
	    }
		// 检查address里是否有数据，没有就执行funImage函数
		var userInfo = document.getElementById(userInfoList);
		if (!userInfo) {
			consumerId=sessionStorage.getItem('consumerId')
			getInfo(consumerId);
		}
	});
	
const getInfo = (consumerId) => {
    axios.get("http://localhost:8080/consumer/details", { 
        params: { consumerId },
		}).then((response) => {
        console.log(response.data);
		userInfo=response.data;
		funUserInfo(userInfo);
    }).catch(error => {
        console.error("获取地址详情失败:", error);
    });
};

function funUserInfo(userInfo) {
		  var str = '<ul class="info-list">';
		  str += '<li><label>电话号码：</label><span class="info-value" name="phone">' + userInfo.phone + '</span></li>';
		  str += '<li><label class="user_title_name">用户昵称：</label><input name="consumerName" type="text" value="' + userInfo.consumerName + '" class="add_text" required/><em>*</em></li>';
		  str += '<li><label class="user_title_name">用户性别：</label>';
		  str += '<label class="sex"><input type="radio" name="sex" value="1" id="sex" required/><span>男</span></label>';
		  str += '<label class="sex"><input type="radio" name="sex" value="2" id="sex" required/><span>女</span></label>';
		  str += '<em>*</em></li>';
		  str += '<li><label class="user_title_name">邮箱地址：</label><input name="email" type="email" class="add_text" value="' + userInfo.email + '" required/><em>*</em></li>';
		  str += '</ul>';
		  str += '<div class="operating_btn"><input name="name" type="submit" value="提交" onclick="update()" class="submit—btn"/></div>'
	
    $("#userInfoList").html(str);
}

	 const getFormData = () => {
	         return {
	             phone: document.getElementsByName("phone")[0].value,
	             consumerName: document.getElementsByName("consumerName")[0].value,
				 email:document.getElementsByName("email")[0].value,
				 consumerId
	         };
	     };
	 
	     const update = () => {
			 const formData = getFormData();
	         // 发送修改请求
	         axios.post("http://127.0.0.1:8080/consumer/update", formData)
	             .then((response) => {
	                 console.log(response);
						if(response.data){
							alert("修改成功！")	
						}else{
							alert(response.data.message)
						}
	             })
	             .catch((error) => {
	                 console.error("注册失败:", error);
	                 // 处理错误情况
	             });
	     };

</script>
</body>
<style>
	/* 基础样式 */
	ul {
	    list-style-type: none;
	    padding: 0;
	    margin: 0;
	}
	
	li {
	    margin-bottom: 10px;
	}
	
	label {
	    display: inline-block;
	    width: 100px;
	    font-weight: bold;
	    margin-bottom: 5px;
	}
	
	.add_text {
	    width: 200px;
	    height: 30px;
	    padding: 5px;
	    border: 1px solid #ccc;
	    border-radius: 3px;
	}
	
	.sex {
	    position: relative;
	    top: -2px;
	    margin-right: 10px;
	}
	
	.sex input[type="radio"] {
	    margin: 0 5px 0 0;
	}
	
	.sex span {
	    cursor: pointer;
	}
	
	em {
	    color: red;
	    font-style: normal;
	    margin-left: 5px;
	}

</style>
</html>
